<template>
  <div class="page">
    <Header></Header>
    <div>
      <el-backtop><i class="el-icon-caret-top"></i></el-backtop>
    </div>
    <el-row style="margin-top: 24px">
      <el-col :span="5">
        <div class="grid-content"></div>
      </el-col>
      <el-col :span="14">
        <div class="mblog">
          <el-row style="margin-top: 24px; margin-left: 14px">
            <el-col :span="20">
              <el-row>
                <el-col :span="4" style="text-align: center">
                  <el-avatar :size="50" style="" :src="blog.authorAvatar"></el-avatar>
                  <p style="font-size: 18px; margin-top: 4px">
                    {{ blog.authorName }}
                  </p>
                </el-col>
                <el-col :span="12" style="">
                  <p style="font-size: 22px">{{ blog.title }}</p>
                  <p style="font-size: 14px; color: #c1c1c1">
                    {{ blog.description }}
                  </p>
                </el-col>
                <el-col :span="8">
                  <p style="font-size: 16px; position: absolute; bottom: 0px">
                    发布时间：{{ blog.created }}
                  </p>
                  <el-button v-if="!ownBlog" type="warning" icon="el-icon-star-on" size="mini" @click="postLike(1)">
                    {{ collectionBtnTitle }}
                  </el-button>
                  <el-button type="danger" icon="el-icon-like" size="mini" @click="postLike(2)">{{ likesBtnTitle }}({{ likes }})</el-button>
                  <el-button v-if="ownBlog" type="primary" icon="el-icon-edit" size="mini" @click="pushEdit">编辑</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <div class="markdown-body" v-html="blog.content"></div>
        </div>
        <div style="margin-top: 20px"></div>

        <p style="font-size: 1.375rem; color: #11181f">评论 ({{ total }})</p>
        <Comment v-if="isLogin" />
        <div v-if="!isLogin" style="text-align: center">
          <el-button type="danger" style="font-size: 1.3rem" icon="el-icon-user" @click="goLogin">请先登录</el-button>
        </div>
        <div v-bind:key="item.id" v-for="item in comment">
          <el-card shadow="none" style="border: 0px">
            <el-row>
              <el-col :span="3">
                <el-avatar :size="50" style="float: right; margin-right: 24px; margin-top: 10px" :src="item.avatar">
                </el-avatar>
              </el-col>
              <el-col :span="21">
                <div>
                  <a style="font-size: 1.1rem; text-decoration: none" :href="'/home/' + item.userId">{{ item.userName }}</a>
                </div>
                <div>
                  <span style="">{{ item.content }}</span>
                </div>
                <div>
                  <span style="
                      font-size: 0.55rem;
                      color: #41464a;
                      position: relative;
                      bottom: 0px;
                    ">{{ item.created }}</span>
                </div>
              </el-col>
            </el-row>
          </el-card>
          <el-divider></el-divider>
        </div>
        <el-pagination style="margin-top: 20px" class="mpage" background layout="prev, pager, next" :current-page="currentPage"
          :page-size="pageSize" :total="total" @current-change="page" />
      </el-col>
      <el-col :span="5">
        <div class="grid-content"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import "github-markdown-css";
import Header from "../components/Header";
import Comment from "../components/Comment";
export default {
  name: "BlogDetail.vue",
  components: { Header, Comment },
  data () {
    return {
      blog: {
        id: "", // 文章ID
        title: "", // 文章标题
        content: "", // 文章内容
        created: "", // 文章发布时间
        authorId: "", // 作者ID
        authorName: "", // 作者用户名
        authorAvatar: "", // 作者头像
        description: "", // 文章摘要
      },
      // 用于用户提交点赞请求的信息表
      userLike: {
        userId: "", // 当前登入用户ID
        postId: "", // 文章ID
        type: "2",
      },
      currentPage: 1, // 当前页数
      total: 0, // 总共
      pageSize: 5, // 单页数量
      comment: {}, // 评论列表
      count: "", // 评论数量
      collection: 0, // 收藏数量
      likes: 0, // 点赞数量
      ownBlog: false, // 是否是自己的博客
      isLogin: false, // 是否登入
      isLiked: false, // 是否已经点赞
      isCollection: false,
      likesBtnTitle: "点赞",
      collectionBtnTitle: "收藏",
    };
  },
  methods: {
    pushEdit () {
      this.$router.push("/blog/" + this.$data.blog.id + "/edit");
    },
    // 获取评论的请求
    page (currentPage) {
      const _this = this;
      _this.$axios
        .get("/comment/getPage/" + _this.blog.id + "?currentPage=" + currentPage)
        .then((res) => {
          console.log("获取评论列表");
          console.log(res.data);
          _this.comment = res.data.data.records;
          _this.currentPage = res.data.data.current;
          _this.total = res.data.data.total;
          _this.pageSize = res.data.data.size;
        });
    },
    goLogin () {
      this.$router.push("/login");
    },
    postLike (types) {
      const _this = this;
      _this.userLike.type = types;
      if (_this.isLogin) {
        this.$axios
          .post("/collection/star", this.userLike, {
            headers: {
              Authorization: localStorage.getItem("token"),
            },
          })
          .then((res) => {
            console.log(res.data);
            if (res.data.msg == "成功") {
              if (types == 1) {
                _this.collectionBtnTitle = "已收藏";
              } else {
                _this.likesBtnTitle = "已点赞";
                _this.likes++;
              }
            } else {
              if (types == 1) {
                _this.collectionBtnTitle = "收藏";
              } else {
                _this.likesBtnTitle = "点赞";
                _this.likes--;
              }
            }
            // location.reload();
          });
      } else {
        this.$message.error("请先登录");
        _this.$router.push("/login");
      }
    },
  },

  created () {
    const blogId = this.$route.params.blogId;
    const _this = this;

    _this.isLogin = localStorage.getItem("token") !== "";
    // 防止获取不到信息报错
    console.log(sessionStorage.getItem("userInfo"));
    if (
      sessionStorage.getItem("userInfo") == null ||
      sessionStorage.getItem("userInfo") == "{}"
    ) {
      _this.$store.commit("SET_USERINFO", {});
      _this.isLogin = false;
    } else {
      _this.isLogin = true;
    }

    // 获取博客详情的请求
    this.$axios.get("/blog/" + blogId).then((res) => {
      console.log("获取博客详情的请求");
      console.log(res.data);
      const blog = res.data.data;
      // 将博客数据赋值给data
      // 博客ID
      _this.blog.id = blog.id;
      _this.userLike.postId = blog.id;
      _this.blog.title = blog.title;
      _this.blog.created = blog.created;
      _this.blog.description = blog.description;
      _this.userLike.userId = _this.$store.getters.getUser.id;
      _this.blog.authorId = blog.userId;
      var MardownIt = require("markdown-it");
      var md = new MardownIt();
      var result = md.render(blog.content);
      _this.blog.content = result;
      _this.ownBlog = blog.userId === _this.$store.getters.getUser.id;
      // 获取作者信息
      if (_this.blog.authorId) {
        // 获取用户信息的请求
        _this.$axios.get("/user/" + _this.blog.authorId).then((res) => {
          const author = res.data.data;
          console.log("获取用户信息的请求");
          console.log(res.data.data);
          _this.blog.authorAvatar = author.avatar;
          _this.blog.authorName = author.username;
        });
        _this.page(1);
        // 获取收藏或者点赞的请求
        _this.$axios.get("/collection/getPost/" + _this.blog.id).then((res) => {
          console.log(res.data);
          if (res.data.code == 200) {
            _this.collection = res.data.collection;
            _this.likes = res.data.likes;
          }
        });
        if (_this.userLike.userId) {
          // 获取个人在该博客的点赞和收藏信息
          _this.$axios
            .get("/collection/getBlog/" + _this.blog.id + "/" + _this.userLike.userId)
            .then((res) => {
              console.log(res.data);
              if (res.data.code == 200) {
                _this.isLiked = res.data.like;
                _this.likesBtnTitle = res.data.like ? "已点赞" : "点赞";
                _this.isCollection = res.data.collection;
                _this.collectionBtnTitle = res.data.collection ? "已收藏" : "收藏";
              }
            });
        }
      } else {
        // 错误提示
        _this.$message.error("访问错误", { duration: 3 * 1000 });
        _this.$router.push("/");
      }
    });
  },
};
</script>

<style scoped>
.mpage {
  margin: 0 auto;
  text-align: center;
}
.border {
  border: 1px soild #000;
}
.el-backtop {
  background: #409eff;
}
.el-backtop:hover {
  background-color: #fff;
}
.el-backtop:hover,
.el-calendar-table td.is-today {
  color: #409eff;
}

.el-backtop,
.el-calendar-table td.is-today {
  color: #fff;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.mblog {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  min-height: 700px;
  padding: 20px 15px;
  user-select: none;
}
</style>
